<template>
  <el-container>
    <Environment ref="Environment"></Environment>
    <el-header>
      <div>
        <WorkspaceSelect></WorkspaceSelect>
        <el-button style="color: mediumseagreen; margin-right:5px;"
                    size="small"
                    @click="updateEnvironment">环境设置</el-button>
        <el-select style="margin-right:5px;" v-model="enviroment.current"
                    size="small">
          <el-option v-for="env in enviroment.options"
                      v-bind:key="env.id"
                      :label="env.name"
                      :value="env.id"></el-option>
        </el-select>
        <!-- <el-button class="el-button-theme"
                      size="small"
                      icon="el-icon-document"
                      @click="openDocument">接口文档</el-button> -->
        <el-dropdown @command="handleCommand" style="float:right;">
          <span class="el-dropdown-link">
            <img style="border-radius: 30px; width:40px; margin-top:10px;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </el-header>
    <el-container>
      <el-aside width="380px">
        <div class="aside-menu">
          <DirectoriesMenu></DirectoriesMenu>
        </div>
      </el-aside>
      <el-main>
        <el-tabs v-model="currentRequestTab"
                 type="border-card"
                 closable
                 @edit="handleTabsEdit">
          <el-tab-pane v-for="(item) in requestTabs"
                       :key="item.name"
                       :name="item.name"
                       :label="item.title">
            <request-frame ref="MainRequest"
                           :input="item.content"></request-frame>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <el-footer height="40px">
      <el-button type="text" icon="el-icon-setting">设置</el-button>
      <el-link style="float:right;" icon="el-icon-edit" type="primary" href="http://www.baidu.com" target="_blank">V1.0.0 更新日志</el-link>
    </el-footer>
  </el-container>
</template>

<style scoped>
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: rgb(255, 210, 210);
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgb(255, 255, 255);
  border-radius: 10px;
  background: #ededed;
}
</style>
<style scoped>
.el-header {
  height: 60px;
  line-height: 60px;
  color: black;
  font-size: large;
  border-bottom: 1px solid gainsboro;
  background-color: mediumseagreen;
}

.el-button-theme {
  background: white;
  border: 1px solid white;
  color: mediumseagreen;
}

.el-main {
  padding: 0px 0px 0px 10px;
}

.el-footer {
  height: 40px !important;
  line-height: 40px;
  border-top: 1px solid #e2e2e2;
  color: #bdbcbc;
}

.request-environment {
  float: right;
  height: 18px;
  width: 18px;
  line-height: 18px;
  margin: 12px 0 9px 10px;
  text-align: center;
  font-size: 12px;
  color: #d3dce6;
  cursor: pointer;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}

.el-tabs--border-card{
  height: 860px;
}
/**

   */
</style>

<script>
import { read } from "@/api/enviroment";
import Environment from "@/components/Environment";
import MainRequest from "@/components/MainRequest";
import WorkspaceSelect from "@/components/WorkspaceSelect";
import DirectoriesMenu from "@/components/DirectoriesMenu";
import { EventBus } from "@/utils/event-bus";

export default {
  name: "index",
  data() {
    return {
      workspace: this.$store.state.app.workspace,
      proxy: false,
      enviroment: {
        current: "测试环境",
        options: [],
      },
      currentRequestTab: "",
      requestTabs: [],
    };
  },
  created() {
    EventBus.$on("openRequest", (param) => {
      this.addTab(param);
    });

    EventBus.$on("changeRequestTab", ({ id, title }) => {
      for (var i in this.requestTabs) {
        if (this.requestTabs[i].name === id) {
          this.requestTabs[i].title = title;
          return;
        }
      }
    });
  },
  watch: {
    workspace: {
      handler(newValue, oldValue) {
        (this.currentRequestTab = ""),
          (this.requestTabs = []),
          this.loadEnviroment();
      },
      deep: true,
    },
    enviroment: {
      handler(newValue, oldValue) {
        this.$store.commit("app/setEnviroment", newValue.current);
      },
      deep: true,
    },
  },
  components: {
    "request-frame": MainRequest,
    Environment,
    WorkspaceSelect,
    DirectoriesMenu,
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {},
    addTab(param) {
      if (param.isNew) {
        param.id = this.uuid();
      }
      for (var i in this.requestTabs) {
        if (this.requestTabs[i].name === param.id) {
          this.currentRequestTab = param.id;
          return;
        }
      }
      this.requestTabs.push({
        title: param.name,
        name: param.id,
        content: param,
      });
      this.currentRequestTab = param.id;
    },
    handleTabsEdit(targetName, action) {
      if (action === "remove") {
        let tabs = this.requestTabs;
        let activeName = this.currentRequestTab;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.currentRequestTab = activeName;
        this.requestTabs = tabs.filter((tab) => tab.name !== targetName);
      }
    },
    openDocument() {
      let routerJump = this.$router.resolve({
        path: "/document",
        query: {
          id: this.workspace.current.id,
        },
      });
      window.open(routerJump.href, "_blank");
    },
    handleCommand(command) {
      switch (command) {
        case "logout":
          this.$store
            .dispatch("user/logout")
            .then(() => {
              location.reload();
              this.loading = false;
            })
            .catch((ex) => {
              this.loading = false;
            });
          break;
      }
    },
    loadEnviroment() {
      let that = this;
      read(this.workspace.current.id).then((response) => {
        var array = response.data;
        that.enviroment.options = array;
        that.enviroment.current = array.length > 0 ? array[0].id : "";
      });
    },
    updateEnvironment() {
      var array = this.enviroment.options;
      this.$refs.Environment.open(array);
    },
    // 获取uuid
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      return s.join("");
    },
  },
};
</script>

<!-- https://www.cnblogs.com/jdWu-d/p/11898666.html -->
